Edit the style of a Shiny App with HTML elements.
HTML (Hypertext Markup Language) is a coding language like markdown used to style web documents.
When you look at a webpage, that is a browser interpreting HTML code.
The Shiny package functions are a way to use R to create the HTML for the user interface in all Shiny Apps with out having to learn any HTML.
library(shiny)
ui <- fluidPage(
titlePanel("Hello"),
textInput("text", "What Text?")
)
ui
<>” are called HTML “tags”. For example:
<strong>...</strong>: Makes text bold.
<strong>Sesquipedalian</strong>
Sesquipedalian
<u>...</u>: Makes text underlined.
<u>Sesquipedalian</u>
Sesquipedalian
<s>...</s>: Makes text strikeout.
<s>Sesquipedalian</s>
Sesquipedalian
<code>...</code>: Makes text mono-spaced.
<code>Sesquipedalian</code>
Sesquipedalian
<h1>...</h1>, <h2>...</h2>, <h3>...</h3>: Creates headings, subheadings, sub-subheadings.
<h3>Sesquipedalian</h3>
Sesquipedalian
<p>...</p>: Makes paragraphs.
<strong>Sesquipedalian</strong>
Sesquipedalian
The following creates an itemized list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
- Item 1
- Item 2
<br></br>: Inserts a line break.
Some text
<br></br>
More text
Some text
More text
<hr></hr>: Inserts a horizontal “rule” (line).
<hr></hr>
<img></img>: Inserts images (see below).
<a>...</a>: The “anchor” tag. Creates hyperlinks (see below).
Tag arguments are called “attributes” and are placed after the tag name in the first <>. For example, for hyperlinks you need to give it the URL with the href attribute:
<a href="https://www.youtube.com/watch?v=Nnuq9PXbywA">Click Me!</a>
Another example with images:
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c6/American_University_logo.svg"
height="100"
width="200">
</img>
When you load the shiny library, it will load a list of functions called tags.
Each function in tags is an HTML tag. For example, to create an anchor tag use:
tags$a("Click Me!", href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ")
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Click Me!</a>
Any named argument becomes an HTML attribute.
Any unnamed argument is placed between the tags.
You can put tags inside tags.
tags$a(tags$h1("Click Me!"), "Now!",
href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ")
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
<h1>Click Me!</h1>
Now!
</a>
Click Me!
Now!
tags.Just put these HTML elements inside the fluidPage() call.
library(shiny)
ui <- fluidPage(
tags$h1("I am a title"),
tags$a("I am a link", href = "https://www.youtube.com/watch?v=FX20kcp7j5c")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Use the img tag to insert the American University logo into a Shiny App. The url can be found here: https://upload.wikimedia.org/wikipedia/commons/c/c6/American_University_logo.svg
To add an image (or video) not from a webpage, add a “www” folder inside your Shiny app. Add all images into that folder. Reference to those images by name only (not by the path) in the img tag.
library(shiny)
ui <- fluidPage(
tags$img(src = "AU-Logo-on-white-small.png"),
wellPanel(
tags$h1("AU Website Video"),
tags$br(),
tags$h5("Open in a browser"),
tags$hr(),
tags$video(width="100%", type = "video/mp4", autoplay=TRUE, muted = NA, loop = NA,
src = "AU20191011_Early_Fall.mp4")
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)